import 'package:cached_network_image/cached_network_image.dart';
import 'package:family_expense/features/journey/models/region.dart';
import 'package:flutter/material.dart';

class RegionShared {
  /// Shows a pick modal for region selection.
  /// [regions] is the list of all regions. The [ListTile] is generated based on it.
  /// [region] is current region for making [ListTile] selected.
  static void showRegionModalBottomSheet(
      BuildContext context, List<Region> regions, ValueChanged<Region> onTap,
      {Region? region}) {
    final listTiles = regions
        .map((p) => ListTile(
              leading: RegionFlag(p),
              title: Text(p.title!),
              selected: p.id == region?.id,
              onTap: () => onTap(p),
            ))
        .toList();

    showModalBottomSheet<void>(
      context: context,
      builder: (context) => Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          const SizedBox(height: 20.0),
          Text(
            '国家/地区',
            style: Theme.of(context).textTheme.titleLarge,
          ),
          const SizedBox(height: 20.0),
          Expanded(
            child: ListView(
              children: listTiles,
            ),
          ),
        ],
      ),
    );
  }
}

/// Gets the region flag widget based on [region].
class RegionFlag extends StatelessWidget {
  const RegionFlag(this.region,
      {super.key, this.width = 40.0, this.height = 40.0});

  final Region region;
  final double width;
  final double height;

  @override
  Widget build(BuildContext context) {
    return CircleAvatar(
      radius: 21.0,
      backgroundColor: Colors.black26,
      child: ClipOval(
        child: CachedNetworkImage(
          imageUrl: region.flagUrl!,
          fit: BoxFit.cover,
          height: height,
          width: width,
        ),
      ),
    );
    // return Container(
    //   decoration: BoxDecoration(
    //     border: Border.all(
    //       color: Colors.black26,
    //       width: 1.0,
    //     ),
    //   ),
    //   width: width,
    //   height: height,
    //   child: CachedNetworkImage(
    //     imageUrl: region.flagUrl!,
    //     fit: BoxFit.cover,
    //   ),
    // );
  }
}
